import { useState, useEffect, useContext, useRef } from 'react'
import LittleTitle from '../../../../../../common/LittleTitle';
import { Radio, Space, Table, Tooltip } from 'antd';
import ScrollTable from '../../../../../../common/ScrollTable';
import LineChart from './LineChart';
// import VideoMonitor from './VideoMonitorl';
import FetchHelper from '../../../../../../../utils/helper/fetch-helper';
import JudgeAnalysis from '../../common/JudgeAnalysis';
export default function RainDetail(props) {
    const [data, setData] = useState();
    const [total, setTotal] = useState();

    const { item } = props;
    const [jcdata, setJcdata] = useState();

    const [params, setParams] = useState({
        pageNum: 1,
        pageSize: 5,
        type: '降雨量',
        zdid: item.zdid
    });

    const rootRef = useRef();

    const [currentPanel, setCurrentPanel] = useState(1);

    useEffect(() => {

        const arrDistrict = ['叙州', '翠屏', '南溪', '屏山', '兴文', '筠连', '珙县', '长宁', '高县', '江安']
        let qx = '';
        const a = arrDistrict.map((e, index) => {
            const ea = new RegExp(e);
            if (ea.test(item?.zdm)) {
                if (index === 0) { qx = '叙州区' }
                else if (index === 1) { qx = '翠屏区' }
                else if (index === 2) { qx = '南溪区' }
                else if (index === 3) { qx = '屏山线' }
                else if (index === 4) { qx = '兴文县' }
                else if (index === 5) { qx = '筠连县' }
                else if (index === 6) { qx = '珙县' }
                else if (index === 7) { qx = '长宁县' }
                else if (index === 8) { qx = '高县' }
                else if (index === 9) { qx = '江安县' }
            }
        })
        FetchHelper.getJson(`/admin-api/ybyj/rysdsc/list`, {
            ...params,
            qx,
            type: '降雨量'
        }).then(resp => {
            setData(resp.rows)
            setTotal(resp?.total)

            setJcdata(e => ({
                ...e,
                XName: resp.rows.map(e => {
                    const a = e?.tm.indexOf("日")
                    //const b=e?.tm.indexOf("-")
                    return e?.tm.substring(0, a)
                }),
                data: [resp.rows.map(e => e?.data)],
                Line: ['降雨量'],
            }));
        })
    }, [params, item])



    return <div className='fill  layout-v'>
        <LittleTitle>
            <div className='layout-h center' style={{
                justifyContent: 'space-between',
                paddingRight: 8,

            }}>
                <div>雨情数据</div>
                <div>
                    <Radio.Group size='small' buttonStyle='outline' value={currentPanel} onChange={e => {
                        setCurrentPanel(e.target.value);
                    }}>
                        <Radio.Button value={1}>监测数据</Radio.Button>
                        <Radio.Button value={2}>折线图</Radio.Button>
                        {/* <Radio.Button value={3}>视频监测</Radio.Button> */}
                    </Radio.Group>
                </div>
            </div>
        </LittleTitle>

        <div style={{
            padding: 12,
            // overflow:'auto'
        }} ref={rootRef}>
            {currentPanel === 1 && <Table parentNode={rootRef.current} size='small' bordered columns={[{
                title: '开始时间',
                dataIndex: 'begin',
                render: (text) => (
                    <Tooltip title={text}>
                        <div style={{ width: '100px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                            {text}
                        </div>
                    </Tooltip>
                )
            }, {
                title: '结束时间',
                dataIndex: 'end',
                render: (text) => {
                    return text;
                }
            }, {
                title: '降雨量',
                dataIndex: 'data',
                render: (text) => {
                    return text;
                }
            }]}
                dataSource={data}
                pagination={{
                    current: params.pageNum,
                    pageSize: params.pageSize,
                    simple: true,
                    total,
                    onChange: (page) => {
                        setParams(params => {
                            return {
                                ...params,
                                pageNum: page
                            }
                        })
                    }
                }}
            />}
            {currentPanel === 2 && <LineChart jcdata={jcdata} jjz={item} />}
            {/* {currentPanel === 3 && <VideoMonitor />} */}

        </div>

        <JudgeAnalysis item={item} />
    </div>;
}